<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doGet(){
            /**
             * 获取元素/DOM对象
             */
            // var obj = document.getElementById('mydiv')
            // console.log(typeof obj)
            // console.log(obj)
           
            // var objs = document.getElementsByName('hobbies')
            // var objs = document.getElementsByTagName('p')

            // // console.log(objs)
            // for(var obj of objs){
            //     console.log(obj)
            // }

            /**
             * 访问属性
             */ 
            // console.log(obj.title)
            // obj.title = '这是一个非常帅气的div'

            /**
             * 访问内容
             */ 
            // console.log(obj.innerText)
            // obj.innerText = 'hahahahahahahaha'

            /**
             * 访问CSS
             */ 
            // console.log(obj.style.background)
            // obj.style.background = 'green'

            /**
             * 添加操作
             */ 
            // var li = document.createElement('li')
            // li.innerText = 'mike'

            // var content = document.getElementById('content')
            // content.appendChild(li)

            /**
             * 删除操作
             */ 
            // document.getElementById('hello').remove()


            var username = document.getElementById('username')
            // console.log(username.value)
            username.value = 'alice'
        }
    </script>
</head>
<body>
    <!-- <input type="button" value="点我"> -->
    <button onclick="doGet()">点我</button>
    <hr>

    <div id="mydiv" title="this is a div" style="width: 200px; height: 100px; background: pink;">哈哈</div>
    <p>嘿嘿</p>
    <h2>嘻嘻</h2>
    爱好：<input type="checkbox" name="hobbies" value="eat"> 吃饭
        <input type="checkbox" name="hobbies" value="sleep"> 睡觉
        <input type="checkbox" name="hobbies" value="play"> 玩
        <input type="checkbox" name="hobbies" value="travel"> 旅游 
    <p>吼吼</p>
    <hr>

    <ul id="content">
        <li id="hello">tom</li>
        <li>jack</li>
        <li>alice</li>
    </ul>

    用户名：<input type="text" id="username" value="admin">
</body>
</html>